
.px2rem(@name, @px){
    @{name}: @px / 75 * 1rem;
}
.fz(@px){
	.px2rem(font-size,@px);
}


.headbar{
	position: fixed;
	width: 100%;
	.px2rem(top,90);
	.px2rem(height,90);
	background: #fff;
	display: flex;
	justify-content: space-around;
	text-align: center;
	color: #6c6b6b;
	p{
		width: 40%;
		.px2rem(line-height,90);
		box-sizing: border-box;
	}
	.active_p{
		border-bottom: 3px solid #18a7fd;
	}
}

.leftlist{
	.px2rem(padding-top,180);
	.item{
		background: #fff;
		.px2rem(padding,25);
		.title{
			img{
				width: 13%;
				float: left;
				.px2rem(margin-right,20);
			}
			.name{
				font-weight: bolder;
				.px2rem(line-height,50);
			}
			.date{
				color: #a9a9a9;
			}
		}
	}
	.introduce{
		clear: both;
		.px2rem(margin-top,20);
		.px2rem(margin-bottom,20);
		.px2rem(line-height,45);
		span{
			color: #f7919c;
		}
	}
	.content{
		display: flex;
		flex-wrap: wrap;
		img{
			width: 32%;
			.px2rem(height,220);
			margin-right: 2%;
			.px2rem(margin-bottom,16);
		}
		img:nth-child(3n){
			margin-right: 0;
		}
	}
	.operation{
		text-align: right;
		.px2rem(margin-top,20);
		span{
			color: #c9c9c9;
			margin-left: 2%;
		}
	}
}

.rightlist{
	display: none;
	.px2rem(padding,25);
	.px2rem(padding-top,210);
	.item{
		background: #fff;
		.px2rem(padding-bottom,30);
		img{
			width: 100%;
		}
		.title{
			font-weight: bolder;
			.px2rem(padding-left,30);
			.px2rem(margin-top,20);
			border-left: 3px solid #fc9e85;
		}
		.info{
			color: #44aff5;
			.px2rem(padding-left,30);
			.px2rem(margin-top,20);
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
		.place{
			color: #8c8c8c;
			.px2rem(padding-left,30);
			.px2rem(margin-top,20);
			span{
				float: right;
				.px2rem(margin-left,20);
				i{
					.px2rem(margin-right,10);
				}
			}
		}
	}
}



